<template>
    <div class="perapply-main">
        <el-form ref="formRef" :rules="rules" :model="form" scroll-to-error label-width="auto">
            <div class="grid_box">
                <div class="grid_left">
                    <el-form-item class="custom-form-item" label="申请邮箱" prop="email">
                        <el-input maxlength="40" v-model.trim="form.email" show-word-limit></el-input>
                        <div class="custom-item-tip">用于接收注册邮件。</div>
                    </el-form-item>
                    <el-form-item label="企业名称" prop="merchantName">
                        <el-input maxlength="50" v-model.trim="form.merchantName" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="企业地址" prop="merchantAddress">
                        <el-input maxlength="40" v-model.trim="form.merchantAddress" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="社会信用代码" prop="regNo">
                        <el-input maxlength="20" v-model.trim="form.regNo" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="组成形式" prop="organizationStyle">
                        <el-radio-group v-model="form.organizationStyle">
                            <el-radio :label="1">个人经营</el-radio>
                            <el-radio :label="2">家庭经营</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="营业执照有效期" prop="licenseExpireDate" class="item-flex">
                        <div class="date_checkbox">
                            <el-date-picker
                                v-model="form.licenseExpireDate"
                                type="date"
                                :disabled="form.licenseExtended == 1"
                                placeholder="年/月/日"
                                value-format="YYYY-MM-DD"
                                class="custom-date" />
                            <el-checkbox v-model="form.licenseExtended" :true-label="1" :false-label="2">
                                无有效期
                            </el-checkbox>
                        </div>
                    </el-form-item>
                    <el-form-item label="经营者姓名" prop="operatorName">
                        <el-input maxlength="20" v-model.number="form.operatorName" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="经营者身份证有效期" prop="operatorIdCardExpireDate" class="item-flex">
                        <div class="date_checkbox">
                            <el-date-picker
                                v-model="form.operatorIdCardExpireDate"
                                :disabled="form.operatorIdCardExtended == 1"
                                type="date"
                                placeholder="年/月/日"
                                value-format="YYYY-MM-DD"
                                class="custom-date" />
                            <el-checkbox v-model="form.operatorIdCardExtended" :true-label="1" :false-label="2">
                                长期有效
                            </el-checkbox>
                        </div>
                    </el-form-item>
                </div>
                <div class="grid_right">
                    <el-form-item label="联系手机号" prop="contactMobile" class="custom-form-item">
                        <el-input maxlength="20" v-model.trim="form.contactMobile" show-word-limit></el-input>
                        <div class="custom-item-tip">用于接收短信。</div>
                    </el-form-item>
                    <el-form-item label="经营范围" prop="businessScope" class="custom-textare">
                        <el-input
                            maxlength="140"
                            v-model.trim="form.businessScope"
                            type="textarea"
                            :rows="10"
                            resize="none"
                            style="height: 130px"
                            show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="注册日期" prop="registerAt">
                        <el-date-picker
                            v-model="form.registerAt"
                            type="date"
                            placeholder="年/月/日"
                            value-format="YYYY-MM-DD"
                            style="width: 100%" />
                    </el-form-item>
                    <el-form-item label="所属行业" prop="belongIndustrial">
                        <el-select v-model="form.belongIndustrial" class="zw-select-margin" placeholder="请选择">
                            <el-option
                                v-for="item in tradeTimeList"
                                :key="item.code"
                                :label="item.industrialName"
                                :value="item.code" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="经营者身份证号" prop="operatorIdCard">
                        <el-input maxlength="20" v-model.trim="form.operatorIdCard" show-word-limit></el-input>
                    </el-form-item>
                </div>
            </div>
            <div class="divider"></div>

            <!-- ---------------------------------------------------------------------------------------- -->
            <div class="grid_box">
                <div class="grid_left">
                    <el-form-item label="绑卡账户类型" prop="bindAccountType" label-width="180px">
                        <el-radio-group v-model="form.bindAccountType">
                            <el-radio :label="1">对公卡</el-radio>
                            <el-radio :label="2">法人对私卡</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <template v-if="form.bindAccountType == 1">
                        <el-form-item label="开户名称" prop="cardName">
                            <el-input maxlength="50" v-model.trim="form.cardName" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="开户银行" prop="bankName">
                            <el-input maxlength="20" v-model.trim="form.bankName" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="开户银行所在省市">
                            <div class="address_select">
                                <el-form-item prop="provinceName" label-width="0">
                                    <el-select
                                        v-model="form.provinceName"
                                        class="zw-select-margin"
                                        @change="provinceChangeHandle"
                                        placeholder="请选择省">
                                        <el-option
                                            v-for="item in provinceOptions"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.name" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item prop="cityName" label-width="0">
                                    <el-select
                                        v-model="form.cityName"
                                        class="zw-select-margin"
                                        placeholder="请选择市"
                                        no-data-text="请选择省">
                                        <el-option
                                            v-for="item in cityOptions"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.name" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-form-item>
                    </template>
                </div>
                <div class="grid_right">
                    <template v-if="form.bindAccountType == 2">
                        <el-form-item label="银行预留手机号" prop="bankReservedMobile" class="custom-form-item">
                            <el-input maxlength="20" v-model.trim="form.bankReservedMobile" show-word-limit></el-input>
                            <div class="custom-item-tip">用于绑定法人对私银行卡。</div>
                        </el-form-item>
                    </template>
                    <template v-if="form.bindAccountType == 1">
                        <el-form-item label="对公账号" prop="cardNo">
                            <el-input maxlength="20" v-model.trim="form.cardNo" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="开户银行支行名称" prop="branchName">
                            <el-input maxlength="20" v-model.trim="form.branchName" show-word-limit></el-input>
                        </el-form-item>
                    </template>
                </div>
            </div>

            <div class="divider"></div>
            <div class="grid_box">
                <div class="grid_left">
                    <el-form-item label="填写人是否法人" prop="proposer">
                        <el-radio-group v-model="form.proposer">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <template v-if="form.proposer == 2">
                        <el-form-item
                            label="代理人身份证号"
                            prop="agentIdCard"
                            :rules="[
                                {
                                    required: form.proposer == 2,
                                    message: '请输入代理人身份证号',
                                    trigger: 'blur'
                                },
                                {
                                    pattern: getRegExp('idcard'),
                                    message: '代理人身份证号格式不正确',
                                    trigger: 'blur'
                                }
                            ]">
                            <el-input maxlength="20" v-model.trim="form.agentIdCard" show-word-limit></el-input>
                        </el-form-item>
                    </template>
                </div>
                <div class="grid_right">
                    <template v-if="form.proposer == 2">
                        <el-form-item
                            label="代理人姓名"
                            prop="agentName"
                            :rules="{
                                required: form.proposer == 2,
                                message: '请输入代理人姓名',
                                trigger: 'blur'
                            }">
                            <el-input maxlength="20" v-model.trim="form.agentName" show-word-limit></el-input>
                        </el-form-item>

                        <el-form-item
                            label="代理人联系电话"
                            prop="agentContactMobile"
                            :rules="[
                                {
                                    required: form.proposer == 2,
                                    message: '请输入代理人联系电话',
                                    trigger: 'blur'
                                },
                                {
                                    pattern: getRegExp('phone'),
                                    message: '代理人联系电话格式不正确',
                                    trigger: 'blur'
                                }
                            ]">
                            <el-input maxlength="20" v-model.trim="form.agentContactMobile" show-word-limit></el-input>
                        </el-form-item>
                    </template>
                </div>
            </div>
            <div class="divider"></div>

            <!-- ------------------------------------------------------------------------------------ -->
            <div class="grid_box">
                <div class="grid_left">
                    <el-form-item label="受益人是实际控制人" prop="inBenefit">
                        <el-radio-group v-model="form.inBenefit">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <template v-if="form.inBenefit == 2">
                        <el-form-item
                            label="受益人居住地址"
                            prop="beneficiaryArea"
                            :rules="{
                                required: form.inBenefit == 2,
                                message: '请输入受益人居住地址',
                                trigger: 'blur'
                            }">
                            <el-input maxlength="40" v-model.trim="form.beneficiaryArea" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="受益人身份证有效期" prop="beneficiaryIdCardExpireDate" class="item-flex">
                            <div class="date_checkbox">
                                <el-date-picker
                                    v-model="form.beneficiaryIdCardExpireDate"
                                    type="date"
                                    placeholder="年/月/日"
                                    value-format="YYYY-MM-DD"
                                    :disabled="form.beneficiaryIdCardExtended == 1"
                                    class="custom-date" />
                                <el-checkbox v-model="form.beneficiaryIdCardExtended" :true-label="1" :false-label="2">
                                    长期有效
                                </el-checkbox>
                            </div>
                        </el-form-item>
                    </template>
                </div>
                <div class="grid_right">
                    <template v-if="form.inBenefit == 1">
                        <el-form-item
                            label="经营者居住地址"
                            prop="operatorLiveAddress"
                            :rules="{
                                required: form.inBenefit == 1,
                                message: '请输入经营者居住地址',
                                trigger: 'blur'
                            }">
                            <el-input maxlength="40" v-model.trim="form.operatorLiveAddress" show-word-limit></el-input>
                        </el-form-item>
                    </template>
                    <template v-if="form.inBenefit == 2">
                        <el-form-item
                            label="受益人姓名"
                            prop="beneficiaryName"
                            :rules="{
                                required: form.inBenefit == 2,
                                message: '请输入受益人姓名',
                                trigger: 'blur'
                            }">
                            <el-input maxlength="20" v-model.trim="form.beneficiaryName" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item
                            label="受益人身份证号"
                            prop="beneficiaryIdCard"
                            :rules="[
                                {
                                    required: form.inBenefit == 2,

                                    message: '请输入受益人身份证号',
                                    trigger: 'blur'
                                },
                                {
                                    pattern: getRegExp('idcard'),
                                    message: '受益人身份证号格式不正确',
                                    trigger: 'blur'
                                }
                            ]">
                            <el-input maxlength="20" v-model.trim="form.beneficiaryIdCard" show-word-limit></el-input>
                        </el-form-item>
                    </template>
                </div>
            </div>
            <div class="divider"></div>
            <!-- ----------------------------------------------------------------------------------------------- -->
            <div class="grid_box">
                <div class="grid_left">
                    <el-form-item label="法人是实际控制人" prop="inControl">
                        <el-radio-group v-model="form.inControl">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <template v-if="form.inControl == 2">
                        <el-form-item
                            label="实际控制人类型"
                            prop="controllerType"
                            :rules="{
                                required: form.inControl == 2,
                                message: '请选择实际控制人类型',
                                trigger: 'change'
                            }">
                            <el-radio-group v-model="form.controllerType">
                                <el-radio :label="2">个人</el-radio>
                                <el-radio :label="1">企业</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <template v-if="form.controllerType == 1">
                            <el-form-item
                                label="实际控制人企业名称"
                                prop="controllerCompanyName"
                                :rules="{
                                    required: form.controllerType == 1,
                                    message: '请输入实际控制人企业名称',
                                    trigger: 'blur'
                                }">
                                <el-input
                                    maxlength="50"
                                    v-model.trim="form.controllerCompanyName"
                                    show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item
                                label="实际控制人社会信用代码（注册号）"
                                prop="controllerRegNo"
                                label-width="250px"
                                :rules="[
                                    {
                                        required: form.controllerType == 1,
                                        message: '请输入实际控制人社会信用代码（注册号）',
                                        trigger: 'blur'
                                    },
                                    {
                                        pattern: getRegExp('creditCode'),
                                        message: '实际控制人社会信用代码（注册号）格式不正确',
                                        trigger: 'blur'
                                    }
                                ]">
                                <el-input maxlength="20" v-model.trim="form.controllerRegNo" show-word-limit></el-input>
                            </el-form-item>
                        </template>
                        <template v-if="form.controllerType == 2">
                            <el-form-item
                                label="实际控制人姓名"
                                prop="controllerName"
                                :rules="{
                                    required: form.controllerType == 2,
                                    message: '请输入实际控制人姓名',
                                    trigger: 'blur'
                                }">
                                <el-input maxlength="20" v-model.trim="form.controllerName" show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item
                                label="实际控制人身份证号"
                                prop="controllerIdCard"
                                :rules="[
                                    {
                                        required: form.controllerType == 2,
                                        message: '请输入实际控制人身份证号',
                                        trigger: 'blur'
                                    },
                                    {
                                        pattern: getRegExp('idcard'),
                                        message: '实际控制人身份证号格式不正确',
                                        trigger: 'blur'
                                    }
                                ]">
                                <el-input
                                    maxlength="20"
                                    v-model.trim="form.controllerIdCard"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </template>

                        <template v-if="form.controllerType == 1">
                            <el-form-item
                                label="实际控制人营业有效期"
                                prop="controllerBusinessExpireDate"
                                class="item-flex"
                                label-width="auto">
                                <div class="date_checkbox">
                                    <el-date-picker
                                        v-model="form.controllerBusinessExpireDate"
                                        :disabled="form.controllerBusinessExtended == 1"
                                        type="date"
                                        placeholder="年/月/日"
                                        value-format="YYYY-MM-DD"
                                        class="custom-date" />
                                    <el-checkbox
                                        v-model="form.controllerBusinessExtended"
                                        :true-label="1"
                                        :false-label="2">
                                        长期有效
                                    </el-checkbox>
                                </div>
                            </el-form-item>
                        </template>

                        <template v-if="form.controllerType == 2">
                            <el-form-item
                                label="实际控制人身份证有效期"
                                prop="controllerIdCardExpireDate"
                                label-width="auto"
                                class="item-flex">
                                <div class="date_checkbox">
                                    <el-date-picker
                                        v-model="form.controllerIdCardExpireDate"
                                        type="date"
                                        :disabled="form.controllerIdCardExtended == 1"
                                        placeholder="年/月/日"
                                        class="custom-date"
                                        value-format="YYYY-MM-DD" />
                                    <el-checkbox
                                        v-model="form.controllerIdCardExtended"
                                        :true-label="1"
                                        :false-label="2">
                                        长期有效
                                    </el-checkbox>
                                </div>
                            </el-form-item>
                        </template>
                    </template>
                </div>
                <div class="grid_right"></div>
            </div>
        </el-form>
        <div class="footer">
            <el-button type="primary" @click="submitHandler">提交开通</el-button>
        </div>
    </div>
</template>
<script setup>
import request from '@/request';
import provinceOptions from '@/assets/json/city.json';
import { ref, reactive, watch } from 'vue';
import { format, getRegExp, cloneDeep } from '@/commons/utils';
import { ElLoading, ElMessage } from 'element-plus';

const emit = defineEmits(['apply']);
const props = defineProps({
    query: { type: Object, default: () => ({}) }
});
const formRef = ref(null);
const form = reactive({
    accountType: 2,
    shopId: props.query.shopId,
    /**申请邮箱 */
    email: '',
    /**联系手机号 */
    contactMobile: '',
    /** 企业名称*/
    merchantName: '',
    /** 经营范围*/
    businessScope: '',
    /** 企业地址*/
    merchantAddress: '',
    /** 社会信用代码*/
    regNo: '',
    /** 组成形式-0无 1个人经营 2家庭经营*/
    organizationStyle: null,
    /** 注册日期*/
    registerAt: '',
    /** 营业执照有效期*/
    licenseExpireDate: '',
    /** 无有效期-1 无有效期 */
    licenseExtended: 2,
    /** 所属行业*/
    belongIndustrial: '',
    /** 经营者姓名*/
    operatorName: '',
    /** 经营者身份证号*/
    operatorIdCard: '',
    /** 经营者身份证有效期*/
    operatorIdCardExpireDate: '',
    /** 长期有效-1 是2否*/
    operatorIdCardExtended: 2,

    /**绑卡账户类型-1对公卡 2 法人对私卡*/
    bindAccountType: 1,
    /** 开户名称*/
    cardName: '',
    /** 对公账号*/
    cardNo: '',
    /** 开户银行*/
    bankName: '',
    /** 开户银行支行名称*/
    branchName: '',
    /** 开户银行所在省*/
    provinceName: '',
    /** 开户银行所在市*/
    cityName: '',
    /**银行预留手机号 */
    bankReservedMobile: '',

    /**填写人是否法人-1-是 2-否  */
    proposer: 1,
    /**代理人姓名 */
    agentName: '',
    /**代理人身份证号*/
    agentIdCard: '',
    /**代理人联系电话*/
    agentContactMobile: '',

    /**受益人是否实际控制人-1-是  2-否 */
    inBenefit: 1,
    /**经营者居住地址 */
    operatorLiveAddress: '',
    /**受益人姓名 */
    beneficiaryName: '',
    /**受益人居住地址*/
    beneficiaryArea: '',
    /**受益人身份证号*/
    beneficiaryIdCard: '',
    /**受益人身份证有效期*/
    beneficiaryIdCardExpireDate: '',
    /**长期有效-1 长期 有效 2非长期有效*/
    beneficiaryIdCardExtended: 2,

    /**法人是实际控制人 - 1-是 2-否*/
    inControl: 1,
    /**实际控制人类型- 1-企业 2-个人*/
    controllerType: '',
    /**实际控制人姓名*/
    controllerName: '',
    /**实际控制人身份证号*/
    controllerIdCard: '',
    /**实际控制人身份证有效期*/
    controllerIdCardExpireDate: '',
    /**长期有效-长期有效1  非长期有效2*/
    controllerIdCardExtended: 2,
    /**实际控制人企业名称*/
    controllerCompanyName: '',
    /**实际控制人社会信用代码*/
    controllerRegNo: '',
    /**实际控制人营业有效期*/
    controllerBusinessExpireDate: '',
    /**长期有效-长期有效1  非长期有效2*/
    controllerBusinessExtended: 2
});
const tradeTimeList = ref([]);
const rules = reactive({
    merchantName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
    merchantAddress: [{ required: true, message: '请输入企业地址', trigger: 'blur' }],
    bankReservedMobile: [
        { required: true, message: '请输入银行预留手机号', trigger: 'blur' },
        {
            pattern: getRegExp('phone'),
            message: '银行预留手机号格式不正确',
            trigger: 'blur'
        }
    ],
    contactMobile: [
        { required: true, message: '请输入联系手机号', trigger: 'blur' },
        {
            pattern: getRegExp('phone'),
            message: '联系手机号格式不正确',
            trigger: 'blur'
        }
    ],
    regNo: [
        { required: true, message: '请输入社会信用代码', trigger: 'blur' },
        {
            pattern: getRegExp('creditCode'),
            message: '社会信用代码格式不正确',
            trigger: 'blur'
        }
    ],

    businessScope: [{ required: true, message: '请输入经营范围', trigger: 'blur' }],
    email: [
        { required: true, message: '请输入申请邮箱', trigger: 'blur' },
        {
            pattern: getRegExp('email'),
            message: '邮箱格式不正确',
            trigger: 'blur'
        }
    ],
    cardName: [{ required: true, message: '请输入开户名称', trigger: 'blur' }],
    bankName: [
        { required: true, message: '请输入开户银行', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '请输入中文',
            trigger: 'blur'
        }
    ],
    provinceName: [{ required: true, message: '请选择省', trigger: 'change' }],
    belongIndustrial: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
    cityName: [{ required: true, message: '请选择市', trigger: 'change' }],
    branchName: [
        { required: true, message: '请输入开户银行支行名称', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '请输入中文',
            trigger: 'blur'
        }
    ],
    operatorIdCard: [
        { required: true, message: '请输入经营者身份证号', trigger: 'blur' },
        {
            pattern: getRegExp('idcard'),
            message: '经营者身份证格式不正确',
            trigger: 'blur'
        }
    ],
    cardNo: [
        { required: true, message: '请输入对公账号', trigger: 'blur' },
        {
            pattern: getRegExp('bankcard'),
            message: '对公账号格式不正确',
            trigger: 'blur'
        }
    ],
    licenseExpireDate: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (form.licenseExtended === 1) {
                    form.licenseExpireDate = '';
                    callback();
                } else if (value) {
                    callback();
                } else {
                    callback(new Error('请选择营业执照有效期'));
                }
            },
            trigger: 'change'
        }
    ],
    operatorIdCardExpireDate: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (form.operatorIdCardExtended === 1) {
                    form.operatorIdCardExpireDate = '';
                    callback();
                } else if (value) {
                    callback();
                } else {
                    callback(new Error('请选择经营者身份证有效期'));
                }
            },
            trigger: 'change'
        }
    ],
    beneficiaryIdCardExpireDate: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (form.beneficiaryIdCardExtended === 1) {
                    form.beneficiaryIdCardExpireDate = '';
                    callback();
                } else if (value) {
                    callback();
                } else {
                    callback(new Error('请选择受益人身份证有效期'));
                }
            },
            trigger: 'change'
        }
    ],
    controllerBusinessExpireDate: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (form.controllerBusinessExtended === 1) {
                    form.controllerBusinessExpireDate = '';
                    callback();
                } else if (value) {
                    callback();
                } else {
                    callback(new Error('请选择实际控制人营业有效期'));
                }
            },
            trigger: 'change'
        }
    ],
    controllerIdCardExpireDate: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (form.controllerIdCardExtended === 1) {
                    form.controllerIdCardExpireDate = '';
                    callback();
                } else if (value) {
                    callback();
                } else {
                    callback(new Error('请选择实际控制人身份证有效期'));
                }
            },
            trigger: 'change'
        }
    ],
    proposer: [{ required: true, message: '请选择填写人是否是法人', trigger: 'change' }],
    inBenefit: [{ required: true, message: '请选择受益人是否实际控制人', trigger: 'change' }],
    inControl: [{ required: true, message: '请选择受益人是否实际控制人', trigger: 'change' }],
    organizationStyle: [{ required: true, message: '请选择组成形式', trigger: 'change' }],
    registerAt: [{ required: true, message: '请选择注册日期', trigger: 'change' }],
    bindAccountType: [{ required: true, message: '请选择绑卡账户类型', trigger: 'change' }],
    operatorName: [{ required: true, message: '请输入经营者姓名', trigger: 'blur' }]
});

//获取所属行业
const getTrade = async () => {
    request('belongIndustrial').then(res => {
        tradeTimeList.value = res.data;
    });
};
getTrade();
// 市列表
const cityOptions = ref([]);
// 选择省
const provinceChangeHandle = v => {
    form.cityName = '';
    cityOptions.value = provinceOptions.find(item => item.name === v).children;
};
let loading = null;
// 入参格式化
const paramFormatHandle = () => {
    const newForm = cloneDeep(form);
    const deleteObjectKey = arr => {
        arr.forEach(key => delete newForm[key]);
    };
    //绑定账号类型是对公卡时，私卡的相关字段(银行预留手机哈)不传
    if (newForm.bindAccountType === 1) {
        deleteObjectKey(['bankReservedMobile']);
    }
    //绑定账号类型是对私卡，公卡的相关字段(开户银行、对公账号、开户银行支行名称、开户银行所在省市)不传
    if (newForm.bindAccountType === 2) {
        deleteObjectKey(['bankName', 'cardNo', 'branchName', 'provinceName', 'cityName']);
    }
    // 填写人是法人，不是法人的相关字段(代理人姓名、代理人身份证号、代理人联系电话)不传
    if (newForm.proposer == 1) {
        deleteObjectKey(['agentName', 'agentIdCard', 'agentContactMobile']);
    }

    // 受益人是实际控制人时，受益人相关字段(受益人姓名、居住地址、身份证号、身份证有效期)不传
    if (newForm.inBenefit === 1) {
        deleteObjectKey([
            'beneficiaryType',
            'beneficiaryArea',
            'beneficiaryName',
            'beneficiaryIdCard',
            'beneficiaryIdCardExpireDate',
            'beneficiaryIdCardExtended'
        ]);
    }
    //受益人不是实际控制人，相关字段(经营者居住地址)不传
    if (newForm.inBenefit === 2) {
        deleteObjectKey(['operatorLiveAddress']);
    }

    // 法人是实际控制人时，企业/个人相关字段(实际控制人类型、姓名、身份账号、身份证有效期、企业名称、社会信用代码、营业有效期)不传
    if (newForm.inControl == 1) {
        deleteObjectKey([
            'controllerType',
            'controllerName',
            'controllerIdCard',
            'controllerIdCardExpireDate',
            'controllerIdCardExtended',
            'controllerCompanyName',
            'controllerRegNo',
            'controllerBusinessExpireDate',
            'controllerBusinessExtended'
        ]);
    }
    // 法人不是实际控制人，实际控制人是个人，企业的相关字段(实际控制人企业名称、社会信用代码、营业有效期)不传
    if (newForm.inControl == 2 && newForm.controllerType == 2) {
        deleteObjectKey([
            'controllerCompanyName',
            'controllerRegNo',
            'controllerBusinessExpireDate',
            'controllerBusinessExtended'
        ]);
    }
    // 法人不是实际控制人，实际控制人是企业，个人的相关字段(实际控制人姓名、身份证号、身份证有效期)不传
    if (newForm.inControl == 2 && newForm.controllerType == 1) {
        deleteObjectKey([
            'controllerName',
            'controllerIdCard',
            'controllerIdCardExpireDate',
            'controllerIdCardExtended'
        ]);
    }
    const dateMap = {
        licenseExtended: 'licenseExpireDate',
        operatorIdCardExtended: 'operatorIdCardExpireDate',
        beneficiaryIdCardExtended: 'beneficiaryIdCardExpireDate',
        controllerIdCardExtended: 'controllerIdCardExpireDate',
        controllerBusinessExtended: 'controllerBusinessExpireDate'
    };
    // 有效期转为长期
    for (const [key, value] of Object.entries(dateMap)) {
        if (newForm[key] === 1) {
            newForm[key] = '1';
            newForm[value] = '2099-12-31';
        }
        if (newForm[key] === 2) {
            newForm[key] = '2';
        }
    }
    return newForm;
};
// 轮询状态结果
const statusResultHandle = loginNo => {
    setTimeout(async () => {
        const { code, data, msg } = await request('baofuAccountInfoServ', { loginNo });
        if (code === 0) {
            if (data.accountStatus != 1) {
                loading.close();
                emit('apply', data);
            } else {
                statusResultHandle(loginNo);
            }
        } else {
            loading.close();
            ElMessage.error(msg);
        }
    }, 3000);
};
const submitHandler = async () => {
    await formRef.value.validate();
    loading = ElLoading.service({
        lock: true,
        text: '开户申请中',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    const params = paramFormatHandle();
    const { data, code, msg } = await request('personApply', params);
    if (code === 0) {
        // 设置浏览器 URL 地址参数
        const url = `${location.pathname}?no=${data.loginNo}`;
        history.replaceState(null, document.title, url);
        // 轮询状态结果
        statusResultHandle(data.loginNo);
    } else {
        loading.close();
        ElMessage.error(msg);
    }
};
</script>
<style lang="scss" scope>
.perapply-main {
    min-height: calc(100vh - 274px);
    position: relative;
    margin-top: 66px;
    font-family: STHeitiSC-Light, STHeitiSC;
    .grid_box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .custom-form-item {
            .custom-item-tip {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
            }
        }
        .custom-textare .el-form-item__content {
            height: 140px !important;
        }
        .el-form-item {
            margin-bottom: 24px;
            .el-form-item__content {
                flex-direction: column;
                align-items: flex-start;
            }
            .el-input,
            .el-textarea,
            .el-input__wrapper {
                max-width: 460px;
                width: 100%;
            }
            .el-textarea__inner {
                height: 140px !important;
            }
        }
        .date_checkbox {
            flex: 1;
            min-width: calc(100% + 116px);
            display: flex;
            .el-checkbox {
                margin-left: 36px;
                .el-checkbox__input {
                    .el-checkbox__inner {
                        width: 16px;
                        height: 16px;
                        border-radius: 50%;
                        &::after {
                            width: 4px;
                            height: 8px;
                            left: 4.5px;
                            top: 1.5px;
                        }
                    }
                }
                .el-checkbox__label {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
            }
        }
        .address_select {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 9px;
            width: 100%;
            max-width: 460px;
            .el-input {
                width: 100%;
            }
        }
        .grid_left {
            padding-right: 90px;
        }
        .grid_right {
            padding-left: 58px;
        }
    }
    .divider {
        height: 1px;
        margin-bottom: 15px;
        background: #eaeaea;
    }
    .footer {
        text-align: center;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    // -------------------------------------

    .title {
        float: right;

        margin-bottom: 16px;

        color: #999999;

        font-family: PingFangSC-Regular, PingFang SC;

        font-size: 14px;

        font-weight: 400;

        line-height: 30px;
    }
}
</style>
